<template>
  <div class="buy_box">
    <div class="header">
      <span style="position: relative; left: 20px; font-size: 20px; font-weight: 400"
        >我的订阅</span
      >
    </div>
    <div class="content" style="">
      <div style="padding: 10px 20px; font-size: 20px; font-weight: 700"> 130G流量-不限时</div>
      <div style="padding: 10px 20px; color: #6c757d !important">该订阅长期有效</div>
      <div style="padding: 10px 20px">
        <div><el-progress :percentage="28" :format="format" status="success" /></div>
        <div style="font-weight: 700"> 已使28GB/总计130GB </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const format = (percentage) => (percentage === 100 ? '已用完' : `${percentage}G`);
</script>
<style scoped>
  .buy_box {
    display: flex;
    flex-direction: column;
    margin: 10px;

    /* padding: 10px; */
    background-color: white;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
      'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
      'Segoe UI Emoji', 'Segoe UI Symbol';
  }

  .buy_box .header {
    display: flex;
    align-items: center;
    width: 100%;

    /* padding: 10px; */
    height: 60px;
    background-color: #fafafa;
  }
</style>
